<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="https://kc.kagura.me/" name="KCrawler官网">
    <meta content="https://www.kagura.me/" name="鹞之神乐">
    <meta content="https://github.com/KingFalse/KCrawler" name="GitHub">
    <title>KCrawler-开源云爬虫</title>
    <link href="/css/index.css" rel="stylesheet" type=text/css>
    <script src="/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input id="traceId" th:value="${traceId}" type="hidden">
<div class="wrapper" id="startCrawl">
    <div class="content">
        <div class="title">开始您的KCrawler云爬虫体验</div>
        <div class="inputBox"><input style="color: rgb(204, 204, 204);" type="text" value="请输入您想爬取的网页链接！"/><span
                class="button">开始爬取</span></div>
        <div class="more">
            <a href="https://www.kagura.me/">鹞之神乐的博客</a>
            <a href="https://github.com/KingFalse/KCrawler">KCrawler·GitHub</a>
            <div>
                <iframe style="margin: 30px;width: 800px;height: 600px;" allowfullscreen="true" border="0" frameborder="no" framespacing="0" scrolling="no" src="//player.bilibili.com/player.html?aid=37748401&cid=66361722&page=1"></iframe>
            </div>
        </div>
    </div>
</div>
</body>
<script lang="javascript">
    /**
     * 判断IE
     */
    function isIE() {
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * 跳转到下一个页面
     */
    function doSelect(url) {
        if (!isURL(url)) {
            input.css({color: "#ccc"}).val("请输入合法的URL");
            return;
        }
        window.location.href = "/select?traceId=" + $("#traceId").val() + "&url=" + url;
    }

    /**
     * 判断url合法性
     */
    function isURL(str_url) {// 验证url
        var strRegex = "^((https|http)?://)"
            + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@
            + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
            + "|" // 允许IP和DOMAIN（域名）
            + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
            + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
            + "[a-z]{2,6})" // first level domain- .com or .museum
            + "(:[0-9]{1,4})?" // 端口- :80
            + "((/?)|" // a slash isn't required if there is no file name
            + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
        var re = new RegExp(strRegex);
        return re.test(str_url);
    }

    /**
     * 输入框及按钮的事件控制
     */
    var input = $("#startCrawl .inputBox input");
    input.on("focus", function () {
        input.val("").css({color: "#000"})
    }),
        input.on("blur", function () {
            "" == input.val() ? input.css({color: "#ccc"}).val("请输入您想爬取的网页链接") : input.css({color: "#000"})
        }), input.on("keyup", function (ev) {
        if (13 == ev.keyCode) {
            if ("" == ev.target.value.replace(/\s+/g, "") || ev.target.value.replace(/\s+/g, "") == "请输入您想爬取的网页链接".replace(/\s+/g, "") || ev.target.value.replace(/\s+/g, "") == "网址不能为空".replace(/\s+/g, "")) return void input.val("网址不能为空");
            isIE() ? alert("监测到浏览器版本过低，请升级浏览器后试用") : doSelect(input.val());
        }
    }), $("#startCrawl .inputBox .button").on("click", function () {
        return "" == input.val().replace(/\s+/g, "") || input.val().replace(/\s+/g, "") == "请输入您想爬取的网页链接".replace(/\s+/g, "") || input.val().replace(/\s+/g, "") == "网址不能为空".replace(/\s+/g, "") ? void input.val("网址不能为空") : void (isIE() ? alert("监测到浏览器版本过低，请升级浏览器后试用") : doSelect(input.val()))
    })
</script>
</html>